<template>
	<div class="container-wrap">
		<uni-nav-bar fixed shadow :border="false" title="问答社区"
			left-icon="left" @clickLeft="onClickLeft"
			></uni-nav-bar>
		<div :key="pageKey">
			<div class="tab-wrap">
				<van-tabs v-model:modelValue="active_selectedCategory">
					<van-tab v-for="(item, index) in mainCategoryList" :title="item.name" :key="item.id">
					</van-tab>
				</van-tabs>
			</div>
			<div class="label-line tabs-box flex-wrap flex-text-mid">
				<div class="label-container flex fs-14" v-for="(item, index) in menuList" :key="index"
					@click="switchTabs(index)">
					<span :class="activeMenuIndex === index ? 'selected' : ''">{{ item.name }}</span>
				</div>
			</div>
			<div class="list-wrap common-wrap">
				<van-list v-model="listLoading" :finished="listFinished" finished-text="没有更多了" @load="loadMore">
					<ListItem isMain :list="list" vertical></ListItem>
				</van-list>
			</div>
		</div>
		<div class="action-box flex-wrap flex-text-mid space-between" :class="{bottom50: haveForum}">
			<button class="my-pub" @click="toMyList"><i class="icon iconfont icon-a-1wodehuati mr5"></i>我的话题</button>
			<button class="create" @click="addForum"><i class="icon iconfont icon-wodefabu mr5"></i>发布话题</button>
		</div>
	</div>
</template>

<script>
	import {
		mapGetters
	} from 'vuex'
	import ListItem from '@/components/forum/listItem.vue'
	import vanTab from '@/components/vant/van-tab/van-tab.vue'
	import vanTabs from '@/components/vant/van-tabs/van-tabs.vue'
	import vanList from '@/components/vant/van-list/van-list.vue'
    import mockData from "@/mock/forum/index.json"
	import {
		parse,
		stringify
	} from "@/assets/js/util";
	import {
		deleteEmptyChildren,
		genSimpleList,
		initOrgTreeData
	} from "@/assets/js/org";
	export default {
		components: {
			ListItem,
			vanTab,
			vanTabs,
			vanList
		},
		data() {
			return {
				name: '', // 1
				page: {
					pageNumber: 1,
					pageSize: 10,
				},
				list: [], // 课程列表
				listLoading: false,
				listFinished: false,

				listSearch: {
					categoryId: '',
				},
				selectedCategory: {}, // 选中的分类
				active_selectedCategory:0,
				selectedCategoryLevel: 0, // 选中的分类等级（为了变更次级分类数据）
				clearnChildNode: false,
				mainCategoryList: [], // 主分类列表
				childrenCategoryList: [], // 次级分类列表
				menuList: [{
						name: '全部',
						type: ''
					},
					// { name: '推荐', type: '1' },
					{
						name: '热门',
						type: '2'
					},
					{
						name: '精华',
						type: '3'
					}
				],
				dataList: [],
				dataLoading: false,
				hotList: [],
				statistics: {}, // 统计
				hotPage: {
					pageNumber: 1,
					pageSize: 10
				},
				activeMenuIndex: 0,
				active: 0,
				haveForum: false, // 判断本页面是否有底部栏
				siteMenuSourse: '',
				siteType: '',
				showPopover: false,
				actions: [{
					text: '集团',
					value: 'S'
				}, {
					text: '单位',
					value: 'D'
				}],
				pageKey: 1,
				backPath: '',
			}
		},
		mounted() {
			this.initPage()
		},
		methods: {
			onClickLeft() {
				uni.navigateBack({ delta: 1 })
			},
			onSelect(action) {
				this.siteType = action.value
					++this.pageKey
				this.listSearch.categoryId = ''
				this.activeMenuIndex = 0
				this.initPage()
			},
			initPage() {
				this.getCategoryList()
				this.getDataList()
			},

			getCategoryList() {
				let res = deleteEmptyChildren(initOrgTreeData(genSimpleList(mockData.categoryData)))
				res.unshift({
					categoryId: '',
					name: '全部'
				})
				this.mainCategoryList = res
			},

			getDataList(loadNew = false) {
				if (loadNew)return;
				this.list = this.list.concat(mockData.forumList || []);
				this.listFinished = true
			},
			loadMore() {
				if (!this.listFinished) this.getDataList()
			},
			addForum() {
				let query = Object.assign({}, this.query, {
					isBack: '1'
				})
				this.$uniPush({
					name: 'forum-add',
					query: query
				})
			},
			toMyList() {
				let query = Object.assign({}, this.query, {
					isBack: '1'
				})
				this.$uniPush({
					name: 'forum-myForum-list',
					query: query
				})
			},
			switchTabs(index) {
				this.activeMenuIndex = index
				this.getDataList(true)
			},
			// 设置选中节点样式
			handleSelect(e, deep) {
				this.clearnChildNode = false
				try {
					let p = deep ? e.target.parentNode.parentNode.childNodes : e.target.parentNode.childNodes
					for (let index in p) {
						let item = p[index]
						if (item.setAttribute) {
							item.className = ''
							let s = item.childNodes || []
							for (let idx in s) {
								let sm = s[idx]
								if (sm.setAttribute) {
									sm.className = ''
								}
							}
						}
					}
					e.target.className = 'selected'
				} catch (e) {}
			},
		}
	}
</script>

<style lang="scss" scoped>

	.container-wrap {
		position: relative;

		:deep(.tab-wrap) {
			.van-tabs__nav {
				//box-shadow: inset 0px -1px 0px 0px #EEEEEE;
				border-bottom: 1px solid #060606;
			}
		}

		.action-box {
			position: fixed;
			bottom: 0;
			//bottom: 50px;
			width: 100%;
			padding: 14px 20px;
			background-color: #fff;
			box-shadow: inset 0px 1px 0px 0px #EEEEEE;

			&.bottom50 {
				bottom: 50px;
			}

			i {
				font-weight: 400 !important;
				font-size: 18px;
			}

			.my-pub {
				width: 47%;
				height: 40px;
				line-height: 38px;
				background: var(--colorbg1);
				border-radius: 20px;
				font-weight: 600;
				color: var(--color);
				text-align: center;
				font-size: 14px;
				border:1px solid;
			}

			.create {
				width: 47%;
				height: 40px;
				line-height: 38px;
				background: var(--color);
				border-radius: 20px;
				font-weight: 600;
				color: #fff;
				text-align: center;
				font-size: 14px;
			}
		}
	}

	.label-line-box {
		background: #F6F6F6;
		padding: 6px 0 0;

		span {
			margin-left: 10px;
			margin-right: 0 !important;

			&.selected {
				color: var(--color);
				background: var(--colorbg) !important;
			}
		}
	}

	.label-line {
		display: flex;

		.label-name,
		.label-container {
			display: inline-block;
		}

		.label-name {
			color: #999999;
			width: 100px;
			text-align: right;
			line-height: 26px;
		}

		.label-container {
			word-break: keep-all;

			&.flex {
				display: flex;
				align-items: flex-start;
			}

			span {
				cursor: pointer;
				padding: 6px 10px;
				height: 32px;
				margin-right: 10px;
				border-radius: 4px;
				margin-bottom: 6px;
				display: inline-block;

				&.selected {
					color: var(--color);
					background: var(--colorbg);
				}
			}
		}
	}

	.height60 {
		height: 40px;
	}
	.tabs-box {
		margin-top: 12px;
		padding: 0 15px;
	}
	.list-wrap {
		overflow: auto;
		height: calc(100vh - var(--status-bar-height) - 134px);
		padding-bottom: 60px;
		
	}
</style>